<template>
  <div>
        <div class="dingdan">
        <div class="left"><b>|</b> 我的订单</div>
        <div class="right">全部&gt;</div>
      </div>
      <div class="ding">
        <section>
          <img src="@/assets/wode_18.jpg" alt="" />
          <h2>全部</h2>
        </section>
        <section>
          <img src="@/assets/wode_21.jpg" alt="" />
          <h2>已付款</h2>
        </section>
        <section>
          <img src="@/assets/wode_24.jpg" alt="" />
          <h2>已结算</h2>
        </section>
        <section>
          <img src="@/assets/wode_26.jpg" alt="" />
          <h2>已失效</h2>
        </section>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

.dingdan {
  width: 330rem;
  height: 27rem;
  margin: 6rem auto;
  font-size: 14rem;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.dingdan .left b {
  color: #de9189;
  font-weight: bold;
}
.dingdan .right {
  font-size: 12rem;
  color: #6a7c80;
}
.ding {
  width: 330rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 22rem auto;
}
.ding section {
  text-align: center;
}
.ding img {
  width: 22rem;
  height: 18rem;
  margin-bottom: 10rem;
}
.ding h2 {
  font-size: 14rem;
}
</style>